<template>
  <div class="seller" ref="seller">
    <div class="seller-Wrapper">
      <!-- 1.0 收藏和送达时间 -->
      <div class="seller-header">
        <!-- 1.1 上部分 -->
        <div class="header-top">
          <div class="seller-content">
            <div class="seller-name">{{ seller.name }}</div>
            <!-- 商家内容描述 -->
            <div class="seller-desc">
              <star :score="seller.score" :size="30" class="star" />
              <span class="ratingCount">({{ seller.ratingCount }})</span>
              <span class="sellCount">月售{{ seller.sellCount }}单</span>
            </div>
          </div>

          <!-- 收藏 -->
          <div class="seller-right" @click="favorite = !favorite">
            <div class="icon-favorite" :class="{ favorite }"></div>
            <div class="favorite-status">
              {{ favorite ? "已收藏" : "收藏" }}
            </div>
          </div>
        </div>
        <!-- 1.2 下面部分 -->
        <div class="header-buttom">
          <!-- 1.2.1 起送价 -->
          <div class="seller-score-item">
            <div class="seller-score-title">起送价</div>
            <div class="seller-score-desc">
              {{ seller.minPrice }}<span class="small-letter">元</span>
            </div>
          </div>
          <!-- 1.2.2 商家配送 -->
          <div class="seller-score-item">
            <div class="seller-score-title">商家配送</div>
            <div class="seller-score-desc">
              {{ seller.deliveryPrice }}<span class="small-letter">元</span>
            </div>
          </div>
          <!-- 1.2.3 平均配送时间 -->
          <div class="seller-score-item">
            <div class="seller-score-title">平均配送时间</div>
            <div class="seller-score-desc">
              {{ seller.deliveryTime }}<span class="small-letter">分钟</span>
            </div>
          </div>
        </div>
      </div>

      <whiteSpace />

      <!-- 2.0 公告活动和优惠信息 -->
      <div class="seller-bulletin">
        <div class="title-label">公告活动</div>
        <div class="bulletin-content">{{ seller.bulletin }}</div>

        <ul class="supports">
          <li
            :key="i"
            v-for="(support, i) in seller.supports"
            class="supports-items"
          >
            <span
              class="supports-icon"
              :class="supportsClassMap[support.type]"
            ></span>
            {{ support.description }}
          </li>
        </ul>
      </div>

      <whiteSpace />
      <!-- 3.0 商家实景 -->
      <div class="seller-pics">
        <div class="title-label">商家实景</div>
        <div class="pics-wrapper" ref="picsWrapper">
          <ul ref="Ul">
            <li v-for="(pic, i) in seller.pics" :key="i" class="list-item">
              <img :src="pic" alt="图片无法显示" width="120" height="90" />
            </li>
          </ul>
        </div>
      </div>

      <whiteSpace />
      <!-- 4.0 商家信息 -->
      <div class="seller-desc">
        <div class="title-label">商家信息</div>
        <div class="infos" v-for="(item, i) in seller.infos" :key="i">
          {{ item }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
import whiteSpace from "../components/whiteSpace/whiteSpace";
import star from "../components/star/star";
export default {
  name: "seller",
  data: () => ({
    favorite: false,
  }),
  props: ["seller", "supportsClassMap"],
  methods: {
    // 初始化滚动条
    _initScroll() {
      this.sellerScroll = new BScroll(this.$refs.seller, {
        click: true,
        mouseWheel: true,
      });
    },
    // 商家图片滚动
    sellerPicsScroll() {
      // 计算滚动图片一共的长度
      let offsetWidth = this.seller.pics.length * 126;
      // 让ul标签的长度的总长度
      this.$refs.Ul.style.width = offsetWidth + "px";
      // 滚动时间不存在，实例化，否则重新刷新
      if (!this.picsScroll) {
        this.picsScroll = new BScroll(this.$refs.picsWrapper, {
          // 水平滑动
          scrollX: true,
        });
      } else {
        this.picsScroll.refresh();
      }
    },
  },
  watch: {
    seller(newValue, oldValue) {
      //console.log(oldValue);
      if (this.seller.pics && newValue.pics.length) {
        this.sellerPicsScroll();
      }
    },
  },
  created() {
    this.$nextTick(() => {
      setTimeout(() => {
        // 初始化滚动对象
        this._initScroll();
      }, 10);
    });
  },
  mounted() {
    // 有数据，执行，无数据通过watch监听到有数据再执行
    if (this.seller.pics) {
      this.sellerPicsScroll();
    }
  },
  components: {
    star,
    whiteSpace,
  },
};
</script>

<style lang="scss" scoped>
.seller {
  overflow: hidden;
  position: absolute;
  top: 180px;
  bottom: 0px;
  width: 100%;
  .seller-Wrapper {
    .seller-header {
      padding: 18px 18px 0;
      .header-top {
        display: flex;
        .seller-content {
          flex: 1;
          .seller-name {
            font-size: $md-size;
            color: eleblack(1);
            line-height: 14px;
            margin-bottom: 8px;
          }
          .seller-desc {
            padding: 0;
            margin-bottom: 18px;
            .star {
              display: inline-block;
            }
            .ratingCount {
              margin: 0 12px 0 8px;
            }
            .sellCount,
            .ratingCount {
              font-size: $xs-size;
              color: $e-grey;
              line-height: 18px;
            }
          }
        }
        .seller-right {
          flex: 0 0 50px;
          text-align: center;
          .icon-favorite {
            font-size: 24px;
            line-height: 24px;
            color: #ccc;
            margin-bottom: 4px;
            &.favorite {
              color: $e-red;
            }
          }
          .favorite-status {
            font-size: $xs-size;
            line-height: 10px;
            color: $e-grey;
          }
        }
      }
      .header-buttom {
        display: flex;
        padding: 18px 0 18px 0;
        border-top: 1px solid eleblack(0.1);
        .seller-score-item {
          flex: 1;
          text-align: center;
          font-weight: 200;
          border-right: 1px solid eleblack(0.1);
          &:last-child {
            border-right: none;
          }
          .seller-score-title {
            font-size: $xs-size;
            line-height: 10px;
            color: $e-dgrey;
            margin-bottom: 4px;
          }
          .seller-score-desc {
            line-height: 24px;
            font-size: 24px;
            color: eleblack(1);
          }
          .small-letter {
            font-size: $xs-size;
            color: #333;
          }
        }
      }
    }

    .title-label {
      font-size: $md-size;
      line-height: 14px;
      color: eleblack(1);
    }

    .seller-bulletin {
      padding: 18px 18px 0;
      .bulletin-content {
        padding: 8px 12px 16px;
        font-size: $sm-size;
        line-height: 24px;
        color: $e-red;
      }
      .supports {
        list-style: none;
        font-size: $sm-size;
        font-weight: 200;
        line-height: 12px;
        padding: 0px 12px 0px;
        overflow: hidden;
        .supports-items {
          padding: 16px 12px;
          height: 16px;
          font-size: $sm-size;
          font-weight: 200;
          line-height: 16px;
          color: eleblack(1);
          border-top: 1px solid eleblack(0.1);
          // 如果优惠信息的内容文本超出页面长度，
          // 则把超出部分隐藏
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .supports-icon {
          vertical-align: top;
          display: inline-block;
          width: 16px;
          height: 16px;
          margin-right: 6px;
          @include supports(4, 16px 16px);
        }
      }
    }

    .seller-pics {
      padding: 18px 0 18px 18px;
      .title-label {
        margin-bottom: 12px;
      }
      .pics-wrapper {
        overflow: hidden;
        width: 100%;
        ul {
          .list-item {
            display: inline-block;
            margin-right: 6px;
          }
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }

    .seller-desc {
      padding: 18px 18px 0;
      .title-label {
        margin-bottom: 12px;
      }
      .infos {
        padding: 16px 0;
        font-size: $sm-size;
        line-height: 16px;
        font-weight: 200;
        vertical-align: center;
        border-top: 1px solid eleblack(0.1);
      }
    }
  }
}
</style>
